<template>
  <div class="x-state-box" :class="{'x-state-box-red': warning}">
    <div class="header-box">
      <div class="title" :class="{'red-color': data.state === 2}">
        <span :class="{'red-color': warning}">{{data.title}}</span>
      </div>
      <div class="header-msg-box">
        <div class="part">
          <i class="fa fa-thermometer-three-quarters icon"></i>
          <span :class="{'red-color': temperatureSection.MIN > temperature || temperatureSection.MAX < temperature}">{{temperature}}℃</span>
          <div class="part-tip">
            温度：{{temperature}}℃
          </div>
        </div>
        <div class="part">
          <i class="fa fa-tint icon"></i>
          <span>{{humidity}}%</span>
          <div class="part-tip">
            湿度：{{humidity}}%
          </div>
        </div>
        <div class="part" v-for="lev in level">
          <i class="fa fa-flask icon"></i>
          <span>{{lev['26']}}cm</span>
          <div class="part-tip">
            液位：{{lev['26']}}cm
          </div>
        </div>
        <div class="part">
          <i class="fa fa-fire icon"></i>
          <span v-show="flooding === 1" >正常</span>
          <span v-show="flooding === 2" :class="{'red-color': flooding === 2}">异常</span>
          <span v-show="!flooding">离线</span>
          <div class="part-tip">
            水浸：
            <span v-show="flooding === 1" >正常</span>
            <span v-show="flooding === 2" :class="{'red-color': flooding === 2}">异常</span>
            <span v-show="!flooding">离线</span>
          </div>
        </div>
        <div class="part" @click="alert">
          <img src="../../../../assets/images/monitor.png" alt="" class="part-img">
          <span>监控</span>
        </div>
      </div>
    </div>
    <div class="content-box">
      <div class="content" v-for="tube in tubes" :class="{'gray-color': !tube.online}">
        <div class="content-item">
          <div class="title">
            <span>{{ tube.name }}</span>
          </div>
          <div class="msg-box">
            <div class="icon-box">
              <div class="icon" :class="{'icon-gray': !tube.online}"  @click="onShowWorkedChart(tube.id, tube.status)"></div>
              <div class="state"><span>{{tube.status}}</span></div>
            </div>
            <div class="value-box">
              <div class="label"><span>水压：</span></div>
              <div class="value" :class="{'gray-color': !tube.online}"><span>{{tube.tubePressure}}</span><span class="unit">Mpa</span></div>
              <div class="chart-box" @click.prevent.stop="onShowChart(tube.id, tube.limit)">
                <broken-line :width="colWidth" height="40px" :series-data="tube['history']"></broken-line>
                <!--<div class="event-mark" @click="onShowChart(tube.id, tube.limit)"></div>-->
                <div class="chart-box-shelter"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { TEMPERATURE, FLOODING } from '../data'
// import ListJs from '../data/ListJs.js'
import api from 'api'
import DEVICE_TYPES from 'config/device-types'
import PRODUCTIDS from 'config/product-ids'

export default {
  name: 'State',

  props: {
    data: {
      default () {
        return {}
      }
    },
    count: {
      default: 2
    }
  },

  data () {
    return {
      colWidth: '80px',
      temperatureSection: TEMPERATURE,
      floodingSection: FLOODING,
      status: '',
      psumHistorys: [],
      levelTemp: [],
      tubesAjaxTemp: [],
      psumHistorysTemp: []
    }
  },

  computed: {
    level () {
      if (this.data.level.length === 0) {
        return [{'26': '-'}]
      }
      let res = this.data.level
      return res
    },
    flooding () {
      if (this.data.flooding['25'] === undefined) {
        return '-'
      }
      return this.data.flooding['25']
    },
    temperature () {
      if (this.data.waterTempHumidity['13'] === undefined) {
        return '-'
      }
      return this.data.waterTempHumidity['13']
    },
    humidity () {
      if (this.data.waterTempHumidity['14'] === undefined) {
        return '-'
      }
      return this.data.waterTempHumidity['14']
    },
    tubesAjax () {
      return this.$store.getters.tubes
    },
    warning () {
      let res = false
      _.forEach(this.tubesAjax, (item) => {
        if (this.data.title === item.room) {
          res = res || item.isWarnning
        }
      })
      return false
    },
    tubes () {
      if (!this.data.devices) {
        return []
      }
      let res = []
      res = _.filter(this.data.devices, (item) => {
        return item.type === DEVICE_TYPES.TUBE_PRESSURE
      })
      res.forEach(item => {
        item['status'] = '离线'
        item['tubePressure'] = '-'
        this.tubesAjax.forEach(element => {
          if (item.id === element.id) {
            item['tubePressure'] = element.data['27']
            item['status'] = element.online ? '运行' : '离线'
            if (element.id === '1080385972' || element.id === '1080387969' || element.id === '1080389202' || element.id === '1080385745') {
              item['status'] = element.online ? '待机' : '离线'
            }
            item['online'] = element.online
          }
        })
        let finded
        finded = _.find(this.tubesAjax, (element) => {
          return item.id === element.id
        })
        if (finded) {
          item['tubePressure'] = finded.data['27']
          item['status'] = finded.online ? '运行' : '离线'
          if (finded.id === '1080385972' || finded.id === '1080387969' || finded.id === '1080389202' || finded.id === '1080385745') {
            item['status'] = finded.online ? '待机' : '离线'
          }
          item['online'] = finded.online
        }

        finded = _.find(this.psumHistorys, (element) => {
          return item.id === element.deviceId
        })
        if (finded) {
          item['history'] = finded.data
        }
      })
      return res || []
    }
    // tempHumidity () {
    //   if (!this.data.devices) {
    //     return {}
    //   }

    //   let res = _.find(this.data.devices, (item) => {
    //     return item.type === DEVICE_TYPES.TEMP_HUMIDITY
    //   })

    //   return res || {}
    // },
    // levelId () {
    //   if (!this.data.devices) {
    //     return []
    //   }

    //   let res = _.filter(this.data.devices, (item) => {
    //     return item.type === DEVICE_TYPES.LEVEL
    //   })
    //   return res || []
    // },
    // floodingId () {
    //   if (!this.data.devices) {
    //     return {}
    //   }

    //   let res = _.find(this.data.devices, (item) => {
    //     return item.type === DEVICE_TYPES.FLOODING
    //   })

    //   return res || {}
    // }
  },
  mounted () {
    this.requestRestfulData(true)
  },

  methods: {
    requestRestfulData (first) {
      var _self = this
    //   _self.tubesAjaxTemp = []
    //   _self.psumHistorysTemp = []
    //   _self.levelTemp = '-'
    //   // 根据传递进来的设备ID去请求其温度数据和湿度数据
    //   ListJs.apii(_self, PRODUCTIDS[DEVICE_TYPES.TEMP_HUMIDITY], this.tempHumidity.id)
    //   // 请求液位数据
    //   for (let i = 0; i < _self.levelId.length; i++) {
    //     ListJs.apii(_self, PRODUCTIDS[DEVICE_TYPES.LEVEL], _self.levelId[i].id, _self.levelId.length)
    //   }
    //   // 请求水浸数据
    //   ListJs.apii(_self, PRODUCTIDS[DEVICE_TYPES.FLOODING], this.floodingId.id)

      for (let i = 0; i < this.tubes.length; i++) {
        if (_self.tubes[i].id === '') {
          return
        }
        _self.getPressureHistorys(_self.tubes[i].id, _self.tubes.length, true)
      }
    },
    // getCurPressure (item, length, first) {
      // var _self = this
      // api.device.getVDevice(PRODUCTIDS[DEVICE_TYPES.TUBE_PRESSURE], item.id).then(function (doc) {
      //   let obj = {}
      //   obj['tubePressure'] = doc.data[27]
      //   obj['id'] = item.id + ''
      //   obj.warning = doc.data[27] < item.limit.min || doc.data[27] > item.limit.max
      //   obj.online = doc.data.online

      //   _self.tubesAjaxTemp.push(obj)

      //   if (first) {
      //     _self.tubesAjax.push(obj)
      //   }

      //   if (_self.tubesAjaxTemp.length === length) {
      //     _self.tubesAjax = _self.tubesAjaxTemp
      //   }
      //   // 将数据添加如vuex
      //   _self.$store.dispatch('updateWaterDeviceStatus', {
      //     id: item.id,
      //     type: DEVICE_TYPES.TUBE_PRESSURE,
      //     isWarnning: doc.data[27] < item.limit.min || doc.data[27] > item.limit.max, // 是否告警
      //     online: doc.data.online,
      //     data: {
      //       '27': doc.data[27]
      //     },
      //     room: _self.data.title // 所属位置
      //   })
      // }, function (error) {
      //   _self.handleError(error)
      // })
    // },
    // 申请快照数据
    getPressureHistorys (deviceId, length) {
      let productId = PRODUCTIDS[DEVICE_TYPES.TUBE_PRESSURE]
      let params = {
        'offset': 0,
        'limit': 2500,
        'date': {
          'begin': new Date() - 1 * 1000 * 60 * 60 * 24,
          'end': +new Date()
        },
        'rule_id': '58d0990cc5740e446cc94655'
      }
      api.snapshot.getSnapshot(productId, deviceId, params).then((res) => {
        var result = []
        res.data.list.forEach((item) => {
          let obj = {
            value: item['27'] || 0,
            date: new Date(item.snapshot_date)
          }
          result.push(obj)
        })

        this.psumHistorysTemp.push({
          deviceId: deviceId,
          data: result
        })

        if (this.psumHistorysTemp.length === length) {
          this.psumHistorys = this.psumHistorysTemp
        }
      }).catch((res) => {
        this.handleError(res)
      })
    },

    onShowChart (deviceId, limit) {
      this.$emit('showchart', {
        productId: PRODUCTIDS[DEVICE_TYPES.TUBE_PRESSURE],
        deviceId
      }, this.data.title, limit)
    },
    onShowWorkedChart (deviceId, deviceStatus) {
      let stauts = deviceStatus === '运行' ? 1 : 0
      this.$emit('showWorkedChart', {
        productId: PRODUCTIDS[DEVICE_TYPES.TUBE_PRESSURE],
        chartDeviceMsg: stauts,
        deviceId
      }, this.data.title)
    },
    alert () {
      window.alert('请在内网查看')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .x-state-box-red
    width: 100%;
    height: 100%;
    background: #1e1e1e;
    padding 9px 19px
    box-sizing border-box
    border 1px solid red
  .x-state-box
    width: 100%;
    height: 100%;
    background: #1e1e1e;
    padding 10px 20px
    box-sizing border-box
    .header-box
      color: #ccc;
      height: 80px;
      line-height: 30px;
      font-size: 13px;
      border-bottom 1px solid #444
      box-sizing border-box

      .title
        font-size 14px

      .part
        display inline-block
        position relative
        cursor pointer
        margin-left 10px
        margin-right 10px
        height 50px
        line-height 50px
        font-size 14px
        color #999
        .part-img
          vertical-align: middle;
          margin-bottom: 8px;
          width: 23px;
        .icon
          margin-right 5px
          font-size 18px

        .part-tip
          font-size 12px
          position absolute
          top 36px
          left 0px
          width 100px
          padding-left 10px
          height 32px
          line-height 32px
          background #2B2B2B
          border-radius 5px
          color #ccc
          display none
          
        &:hover .part-tip{
          display block
        }

    .content-box
      padding 20px 5px 0
      box-sizing border-box
      width 100%
      height 160px
      display table
      .content
        /*background red*/
        display table-cell
        border-right 1px solid #333
        &:last-child
          border-right 0
      .content-item
        width 200px
        margin 0 auto
        overflow hidden
        padding 0 10px
        box-sizing border-box

        .title
          height 30px
          line-height 30px
          font-size 14px
          padding-left 10px
          box-sizing border-box

      .msg-box
        width 100%
        height 140px

        .icon-box
          float left
          width 90px
          .icon
            cursor pointer
            width 100%
            height 90px
            background no-repeat  url('../../../../assets/images/u156.png') center center / 100% auto
          .icon-red
            width 100%
            height 90px
            background no-repeat  url('../../../../assets/images/u453.png') center center / 100% auto
          .icon-gray
            width 100%
            height 90px
            background no-repeat  url('../../../../assets/images/u367.png') center center / 100% auto
          .state
            text-align center

        .value-box
          float left
          width 85px
          padding-left 15px
          padding-top 15px
          box-sizing border-box
          .label
            height 25px
          .unit
            padding-left 5px

          .chart-box
            position relative
            margin-top 20px
            .chart-box-shelter
              position absolute
              cursor pointer
              font-size 0
              bottom 5px
              height 50px
              width 90px

  .gray-color
    color #999
</style>
